import React, { Component } from "react";
import { Table, Modal, Button, Checkbox, Input } from "antd";
import LinkButton from "../../components/link-button/index";

class uWhitelists extends Component {
  constructor(props) {
    super(props);
    this.state = { visible: false };
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  render() {
    const columns1 = [
      { title: "ID", dataIndex: "name" },
      { title: "U盘描述", dataIndex: "desc" },
    ];
    const data1 = [
      { key: "1", name: "jiu84939h", desc: "cmt的u盘" },
      { key: "2", name: "jiu84939h", desc: "zsz的u盘" },
    ];

    const columns = [
      {
        title: "时间",
        dataIndex: "time",
      },
      {
        title: "u盘盘符",
        dataIndex: "drive",
      },
      {
        title: "u盘序列号",
        dataIndex: "serial",
      },
      {
        title: "类型",
        dataIndex: "type",
      },
      {
        title: "是否被禁止",
        dataIndex: "forbid",
      },
      {
        title: "用户名",
        dataIndex: "name",
      },
      {
        title: "操作",
        render: () => (
          <div>
            <LinkButton style={{ color: "blue" }} onClick={this.showModal}>
              详情
            </LinkButton>
            &nbsp;&nbsp;
            <LinkButton style={{ color: "red" }}>删除</LinkButton>
          </div>
        ),
      },
    ];
    const data = [
      {
        key: "1",
        time: "2019-07-06 01：03",
        drive: "F:/",
        serial: "",
        type: "拔出",
        forbid: "禁止",
        name: "cmt",
      },
      {
        key: "2",
        time: "2019-07-06 01：04",
        drive: "F:/",
        serial: "2012452305148655120",
        type: "插入",
        forbid: "禁止",
        name: "cmt",
      },
    ];

    // rowSelection object indicates the need for row selection
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      getCheckboxProps: (record) => ({
        name: record.name,
      }),
    };
    return (
      <div style={{ float: "left", width: "80%" }}>
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={data}
        />
        <Button type="primary">删除选中</Button>&nbsp;&nbsp;
        <Button type="primary">全部删除</Button>
        <Modal
          title="U盘管控"
          className="addzican-modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <div>
            <Checkbox />
            &nbsp;
            <span>禁止使用U盘</span>
            &nbsp; &nbsp; &nbsp; &nbsp;
            <Checkbox />
            &nbsp;
            <span>U盘只读</span>
          </div>
          <div style={{ marginTop: 10 }}>
            u盘 ID : &nbsp;&nbsp;
            <Input style={{ width: 250 }} value="2012452305148655120" />
            <Button style={{ marginLeft: "200px" }} type="primary">
              创建
            </Button>
          </div>
          <div style={{ marginTop: 10 }}>
            u盘描述:&nbsp;
            <Input style={{ width: 250 }} value="老板第二个U盘" />
            <Button style={{ marginLeft: "200px" }} type="primary">
              修改
            </Button>
          </div>
          <div>
            <Table
              style={{ width: "60%" }}
              pagination={false}
              columns={columns1}
              dataSource={data1}
            />
            <Button
              type="primary"
              style={{
                float: "right",
                marginTop: "-100px",
                marginRight: "182px",
              }}
            >
              删除
            </Button>
            <Button
              type="primary"
              style={{
                float: "right",
                marginTop: "-50px",
                marginRight: "182px",
              }}
            >
              清空
            </Button>
          </div>
        </Modal>
      </div>
    );
  }
}

export default uWhitelists;
